// 圆形进度条
import QtQuick 2.15

Item {
    id: root
    
    property real value: 0
    property real minimum: 0
    property real maximum: 100
    property real progress: Math.max(0, Math.min(1, (value - minimum) / (maximum - minimum)))
    
    property int barStyle: 0  // 0: Donut, 1: Pie, 2: Line
    property real startAngle: -90  // 顶部开始
    property color progressColor: "#2B4AFF"
    property color backgroundColor: "#E0E0E0"
    property color textColor: "#333333"
    property bool showText: true
    property string textFormat: "%p%"
    
    property real outlineWidth: 1
    property real dataWidth: 8
    
    Canvas {
        id: canvas
        anchors.fill: parent
        
        onPaint: {
            if (width <= 0 || height <= 0) return
            
            var ctx = getContext("2d")
            if (!ctx) return
            
            ctx.clearRect(0, 0, width, height)
            
            var centerX = width / 2
            var centerY = height / 2
            var outerRadius = Math.min(width, height) / 2 - 1
            var innerRadius = barStyle === 0 ? outerRadius * 0.75 : 0
            
            // 绘制背景圆
            if (barStyle === 0 || barStyle === 1) {
                ctx.beginPath()
                ctx.arc(centerX, centerY, outerRadius, 0, 2 * Math.PI)
                ctx.fillStyle = backgroundColor
                ctx.fill()
            } else if (barStyle === 2) {
                ctx.beginPath()
                ctx.arc(centerX, centerY, outerRadius - outlineWidth / 2, 0, 2 * Math.PI)
                ctx.strokeStyle = backgroundColor
                ctx.lineWidth = outlineWidth
                ctx.stroke()
            }
            
            // 绘制进度
            if (progress > 0) {
                var angle = progress * 360
                var startAngleRad = startAngle * Math.PI / 180
                var endAngleRad = startAngleRad - angle * Math.PI / 180
                
                ctx.beginPath()
                
                if (barStyle === 0) {
                    // Donut 样式
                    ctx.arc(centerX, centerY, outerRadius, startAngleRad, endAngleRad, true)
                    ctx.arc(centerX, centerY, innerRadius, endAngleRad, startAngleRad, false)
                    ctx.closePath()
                    ctx.fillStyle = progressColor
                    ctx.fill()
                } else if (barStyle === 1) {
                    // Pie 样式
                    ctx.moveTo(centerX, centerY)
                    ctx.arc(centerX, centerY, outerRadius, startAngleRad, endAngleRad, true)
                    ctx.lineTo(centerX, centerY)
                    ctx.closePath()
                    ctx.fillStyle = progressColor
                    ctx.fill()
                } else if (barStyle === 2) {
                    // Line 样式
                    ctx.arc(centerX, centerY, outerRadius - outlineWidth / 2, startAngleRad, endAngleRad, true)
                    ctx.strokeStyle = progressColor
                    ctx.lineWidth = dataWidth
                    ctx.stroke()
                }
            }
            
            // 绘制内圆（Donut 样式）
            if (barStyle === 0 && innerRadius > 0) {
                ctx.beginPath()
                ctx.arc(centerX, centerY, innerRadius, 0, 2 * Math.PI)
                ctx.fillStyle = "#FFFFFF"
                ctx.fill()
            }
            
            // 绘制文字
            if (showText && (barStyle === 0 || barStyle === 1)) {
                var text = textFormat.replace("%p", Math.round(progress * 100))
                text = text.replace("%v", Math.round(value))
                text = text.replace("%m", Math.round(maximum))
                
                ctx.fillStyle = textColor
                ctx.font = (innerRadius * 0.3) + "px Arial"
                ctx.textAlign = "center"
                ctx.textBaseline = "middle"
                ctx.fillText(text, centerX, centerY)
            }
        }
        
        onWidthChanged: {
            if (width > 0 && height > 0) {
                requestPaint()
            }
        }
        onHeightChanged: {
            if (width > 0 && height > 0) {
                requestPaint()
            }
        }
    }
    
    onProgressChanged: {
        if (canvas.width > 0 && canvas.height > 0) {
            canvas.requestPaint()
        }
    }
    onBarStyleChanged: {
        if (canvas.width > 0 && canvas.height > 0) {
            canvas.requestPaint()
        }
    }
    onValueChanged: {
        if (canvas.width > 0 && canvas.height > 0) {
            canvas.requestPaint()
        }
    }
}

